<template>
  <div class="downloadDialog" v-if="showDownloadDialog">
    <mid-dialog-box :title="title" @closeMidDialog="toggleShowDialog">
      <div class="contentBox flex-center">
        <div class="downloadBox flex-column flex-start" v-for="item in downloadData" :key="item.type">
          <vue-qr :text="item.qrCode.text" :logoSrc="require('@/assets/Login/images/logo.png')" :logoScale="48" :margin="0"></vue-qr>
          <div class="tit">{{ item.type }}</div>
          <div class="tip">{{ item.tip }}</div>
          <div class="version">版本{{ item.version }}</div>
        </div>
      </div>
    </mid-dialog-box>
  </div>
</template>

<script>
import VueQr from 'vue-qr'

export default {
  data () {
    return {
      title: '下载APP',
      showDownloadDialog: false
    }
  },
  computed: {
    downloadData () {
      return [
        { qrCode: {}, type: 'iOS', tip: '扫二维码下载', version: '' },
        { qrCode: {}, type: 'Android', tip: '扫二维码下载', version: '' }
      ]
    }
  },
  components: {
    VueQr
  },
  methods: {
    toggleShowDialog () {
      this.showDownloadDialog = !this.showDownloadDialog
    },
    // 获取IOS下载链接
    getIOSApp () {
      this.$store.dispatch('common/getLatestApp', 1).then(res => {
        if (res.data && res.data.code === 200 && res.data.data) {
          this.downloadData[0].qrCode = {
            text: 'https://apps.apple.com/cn/app/id1522247303'
          }
          this.downloadData[0].version = res.data.data.app_edition
        }
      })
    },
    // 获取安卓下载链接
    getAndroidApp () {
      this.$store.dispatch('common/getLatestApp', 0).then(res => {
        if (res.data && res.data.code === 200 && res.data.data) {
          this.downloadData[1].qrCode = {
            text: process.env.VUE_APP_BASE_URL + '/app/download/android/0'
          }
          this.downloadData[1].version = res.data.data.app_edition
        }
      })
    }
  },
  created () {
    this.getIOSApp()
    this.getAndroidApp()
  }
}
</script>

<style lang="scss" scoped>
.downloadDialog {
  .contentBox {
    padding-top: 64px;

    .downloadBox {
      width: 240px;
      height: 320px;
      border: 1px solid #ebedf3;
      // background-color: plum;
      &:hover {
        border-color: #304eec;
      }

      img {
        margin-top: 32px;
        width: 160px !important;
        height: 160px !important;
      }

      .tit {
        margin-top: 20px;
        height: 25px;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        color: #0D172C;
        line-height: 25px;
      }

      .tip, .version {
        margin-top: 10px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #5f7196;
        line-height: 20px;
      }

      .version {
        margin-top: 8px;
      }

      &:last-child {
        margin-left: 40px;
      }
    }
  }
}
</style>
